<template>
  <div class="panel">
    <div class="chart" ref="gauge"></div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      chartGauge: "",
      optionGauge: "",
      showData: [],
    };
  },
  watch: {
    "$store.state.optionGauge": {
      handler: function (val) {
        this.optionGauge = val;
        this.buildChart();
      },
      deep: true,
    },
    "$store.state.sqlHandleData": {
      handler: function (val) {
        this.showData = val;
        this.buildChart();
      },
    },
    "$store.state.sqlData": {
      handler: function (val) {
        this.showData = val;
        this.buildChart();
      },
      deep:true
    },
  },
  mounted() {
    this.optionGauge = this.$store.getters.getOptionGauge;
    this.showData = this.$store.getters.getSQLData;
    this.buildChart();
  },
  methods: {
    buildChart() {
      // 获取要渲染的数据
      const optionGaugeData = JSON.parse(JSON.stringify(this.optionGauge));
      const sqlHandleData = JSON.parse(JSON.stringify(this.showData));
      const showDataArray = [];
      let max = 100;
      sqlHandleData.forEach((element) => {
        const keys = Object.keys(element);
        keys.forEach((key) => {
          if(max<element[key]){
            max = element[key];
          }
          showDataArray.push({
            ...optionGaugeData.baseOption.series[0].data[0],
            value: element[key],
            name: key,
          });
        });
      });
      optionGaugeData.baseOption.series[0].max = max;
      optionGaugeData.baseOption.series[0].data = showDataArray;
      this.chartGauge = this.echarts.init(this.$refs.gauge);
      this.chartGauge.setOption(optionGaugeData, true);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
